<template>
  <div>
    <!-- 玩家展示区 -->
    <el-card class="box-card">
        <div slot="header">
            <span>玩家列表</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh"></el-button>
        </div>
        <div v-for="item in users" :key="item" class="text item">
            <span><i class="el-icon-user-solid"></i>&nbsp;&nbsp;{{ item }}{{ item === nickname ? "（我）" : "" }}</span>
            <el-tag v-if="item === holder" size="mini">主持</el-tag>
        </div>
    </el-card>
    <!-- 游戏控制区 -->
    <el-card class="box-btn">
        <div slot="header">
            <span>游戏控制区</span>
        </div>
        <div>
            <el-button type="primary" size="small" icon="el-icon-edit">主持游戏</el-button>
            <el-button type="warning" size="small" icon="el-icon-delete">终止游戏</el-button>
            <el-button type="success" size="small" icon="el-icon-magic-stick">猜答案</el-button>
            <el-button type="danger" size="small" icon="el-icon-switch-button" @click="exitGames">退出房间</el-button>
        </div>
    </el-card>
    <!-- 画板控制区 -->
    <el-card class="box-btn">
        <div slot="header">
            <span>画板控制区</span>
        </div>
        <div>
            <el-button type="primary" size="small" icon="el-icon-edit">线条颜色</el-button>
            <el-button type="warning" size="small" icon="el-icon-delete">线条宽度</el-button>
            <el-button type="success" size="small" icon="el-icon-magic-stick">橡皮擦</el-button>
        </div>
    </el-card>
    <!-- 信息交流区 -->
    <el-card class="box-btn">
        <div slot="header">
            <span>信息交流区</span>
        </div>
        <div v-for="item in msgs" :key="item.nickname" class="text">
            {{ item.nickname }} : &nbsp;{{ item.cont }}
        </div>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
    data() {
        return {
            resultDialogVisible: false,
            expectImageName: "",
            answerDialogVisible: false,
            inputImageName: "",
            msgs: [
                { nickname: '玩家一', cont: '这是一种水果' },
                { nickname: '玩家二', cont: '这是一种蔬菜' },
                { nickname: '玩家三', cont: '这玩意儿贼好吃' },
                { nickname: '玩家四', cont: '楼上的都是沙雕' },
            ]
        };
    },
    computed: {
        ...mapState(["nickname", "users", "holder"]),
    },
    methods: {

        ...mapActions(['exitGame']),

        saveDialogHandler() {},
        saveAnswerDialogHandler() {},
        exitGames() {
            this.$confirm('这么好玩的游戏，确定不多玩一会儿吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 执行退出操作（清除localstorage,vuex,服务端数据，通知其他客户端）
                this.exitGame()
                this.$router.replace('/login')
                this.$message({
                    type: 'success',
                    message: '小伙子，你还会回来的!'
                });
            }).catch((e) => {
                console.log(e);
                this.$message({
                    type: 'success',
                    message: '你真是个明智的家伙！'
                });          
            });
        }
    },
};
</script>

<style scoped>
.panel-area {
    margin: 10px 0;
}
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}
.box-card {
    width: auto;
}
.box-btn {
    margin-top: 10px;
}
</style>
